<template>
    <div class="main-container">

        <!-- <vab-query-form>
          <vab-query-form-left-panel :span="12">
            <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
              添加
            </el-button>
            <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
              批量删除
            </el-button>
          </vab-query-form-left-panel>
          <vab-query-form-right-panel :span="12">
            <el-form :inline="true" :model="queryForm" @submit.native.prevent>
              <el-form-item>
                <el-input v-model.trim="queryForm.permission" placeholder="请输入查询条件" clearable />
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="queryData">
                  查询
                </el-button>
              </el-form-item>
            </el-form>
          </vab-query-form-right-panel>
        </vab-query-form> -->
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-card class="card" shadow="never">
                    <div slot="header">
                        <span class="tips">部门管理列表</span>
                        <el-button type="success" class="right" icon="el-icon-plus" @click="handleEdit">新增</el-button>
                    </div>
                    <el-table v-loading="listLoading" :data="list" row-key="id" default-expand-all
                              :tree-props="{children: 'children', hasChildren: 'hasChildren'}" border
                              :element-loading-text="elementLoadingText" height="calc(100vh - 310px)">
                        <!--<el-table-column show-overflow-tooltip type="selection" align="center"></el-table-column>-->
                        <!-- <el-table-column
                    show-overflow-tooltip
                    prop="id"
                    label="id"
                  ></el-table-column> -->
                        <el-table-column show-overflow-tooltip prop="name" label="部门名称" align="left"></el-table-column>
                        <!--<el-table-column show-overflow-tooltip prop="is_use" label="状态" width="200px" align="center">-->
                            <!--<template slot-scope="scope">-->
                                <!--<el-tag size="small" type="danger" v-if="scope.row.is_use == '0'">禁用</el-tag>-->
                                <!--<el-tag size="small" type="success" v-else>启用</el-tag>-->
                            <!--</template>-->
                        <!--</el-table-column>-->
                        <el-table-column show-overflow-tooltip label="操作" width="200" align="center">
                            <template #default="{ row }">
                                <el-button size="mini" plain type="primary" @click="handleEdit(row)">编辑</el-button>
                                <el-button size="mini" plain type="danger" @click="handleDelete(row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--<el-pagination background :current-page="queryForm.pageNo" :page-size="queryForm.pageSize"-->
                                   <!--:layout="layout"-->
                                   <!--:total="total" @size-change="handleSizeChange"-->
                                   <!--@current-change="handleCurrentChange"></el-pagination>-->
                </el-card>
            </el-col>
        </el-row>
        <edit ref="edit" @fetch-data="fetchData"></edit>
    </div>
</template>

<script>
    import {getDeptList, doDeptDelete} from '@/api/dept'
    import Edit from './components/RoleManagementEdit'

    export default {
        name: 'warningTypeIndex',
        components: {Edit},
        data() {
            return {
                list: [],
                listLoading: true,
                layout: 'total, sizes, prev, pager, next, jumper',
                total: 0,
                selectRows: '',
                elementLoadingText: '正在加载...',
                queryForm: {
                    pageNo: 1,
                    pageSize: 10,
                    name: '',
                },
                tableData: [{
                    id: 1,
                    // date: '分局',
                    name: '云龙区公安局',
                    // state: '启用',
                    // paixun: '1',
                }, {
                    id: 2,
                    // date: '分局',
                    name: '云龙区公安局2',
                    // state: '启用',
                    // paixun: '2',
                }, {
                    id: 3,
                    // date: '分局',
                    name: '云龙区公安局3',
                    // state: '启用',
                    // paixun: '3',
                    children: [{
                        id: 31,
                        // date: '派出所',
                        name: '云龙区派出所',
                        // state: '启用',
                        // paixun: '4',
                    }, {
                        id: 32,
                        // date: '派出所',
                        name: '云龙区派出所2',
                        // state: '启用',
                        // paixun: '5',
                    }]
                }, {
                    id: 4,
                    date: '分局',
                    name: '云龙区公安局4',
                    state: '启用',
                    paixun: '6',
                }],
                tableData1: [{
                    id: 1,
                    date: '分局',
                    name: '云龙区公安局11',
                    state: '启用',
                    paixun: '7',
                }, {
                    id: 2,
                    date: '分局',
                    name: '云龙区公安局22',
                    state: '启用',
                    paixun: '8',
                }, {
                    id: 3,
                    date: '分局',
                    name: '云龙区公安局33',
                    state: '启用',
                    paixun: '9',
                    hasChildren: true
                }, {
                    id: 4,
                    date: '分局',
                    name: '云龙区公安局44',
                    state: '启用',
                    paixun: '10',
                }],
            }
        },
        created() {
            this.fetchData()
        },
        methods: {
            setSelectRows(val) {
                this.selectRows = val
            },
            handleEdit(row) {
                if (row.id) {
                    this.$refs['edit'].showEdit(row.id)
                } else {
                    this.$refs['edit'].showEdit()
                }
            },
            handleDelete(row) {
                if (row.id) {
                    this.$baseConfirm('你确定要删除当前项吗', null, async () => {
                        const {msg} = await doDeptDelete(row.id)
                        console.log(msg)
                        if("-1"==msg){
                            this.$baseMessage('数据已被绑定，无法进行删除！', 'error')
                        }else{
                            this.$baseMessage('删除成功', 'success')
                            this.queryData()
                        }
                    })
                } else {
                    // if (this.selectRows.length > 0) {
                    //     const ids = this.selectRows.map((item) => item.id).join()
                    //     this.$baseConfirm('你确定要删除选中项吗', null, async () => {
                    //         const {msg} = await doDeptDelete({ids})
                    //         this.$baseMessage(msg, 'success')
                    //         this.fetchData()
                    //     })
                    // } else {
                    //     this.$baseMessage('未选中任何行', 'error')
                    //     return false
                    // }
                }
            },
            handleSizeChange(val) {
                this.queryForm.pageSize = val
                this.fetchData()
            },
            handleCurrentChange(val) {
                this.queryForm.pageNo = val
                this.fetchData()
            },
            queryData() {
                this.queryForm.pageNo = 1
                this.fetchData()
            },
            async fetchData() {
                this.listLoading = true
                const {data} = await getDeptList(this.queryForm)
                // console.log(data)
                this.list = data
                this.total = data.length
                setTimeout(() => {
                    this.listLoading = false
                }, 300)
            },
        },
    }
</script>
